<template>
	<view class="message-page">
		<view class="message-page-top" :style="'top:' + stickyTop + 'px'">
			<view :class="{'message-tit':true,'active':chooseType==='left','red-circle':leftReadAll}"
				@click="showTipData">系统通知</view>
			<view :class="{'message-tit':true,'active':chooseType==='right','red-circle':rightReadAll}"
				@click="showAwardData">中奖消息</view>

			<view class="all-read" :class="{'opactiy5': !showData.filter(i=>!i.read).length}" @click="readAll">
				<uni-icons custom-prefix="iconfont" type="icon-qingkonghuancun" size="32rpx" class="icon"></uni-icons>
				全部已读
			</view>
		</view>

		<!-- 消息主体内容 -->
		<view class="message-body">

			<!-- 每一项消息 -->
			<view class="message-item" v-for="(item,index) in showData" :key="index" @click="readMessageDetail">
				<!-- 时间 -->
				<view class="message-item-time">
					{{item.time}}
				</view>
				<!-- 具体内容 -->
				<view class="message-item-cont">
					<!-- 消息类型 -->
					<view :class="item.read ? 'message-item-bold' : 'message-item-bold red-circle'">
						{{item.bold}}
					</view>
					<!-- 消息内容 -->
					<view class="message-item-light" v-html="item.light"></view>
					<!-- 分割线 -->
					<u-line></u-line>
					<!-- 查看详情 -->
					<view class="look-info">
						<text>{{chooseType==='left' ? '查看详情' : '去查看'}}</text>
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶
				stickyTop: 0,
				// 展示数据
				showData: [],

				// 选中类型
				chooseType: 'left',

				// 通知数据
				tipData: [{
					time: '今天 05:40',
					bold: '优惠券提醒',
					read: false,
					light: '恭喜您获得一张优惠券，快去使用吧！'
				}, {
					time: '今天 05:40',
					bold: '优惠券过期提醒',
					read: false,
					light: '您的优惠券快要过期了，快去使用吧！'
				}, {
					time: '昨天 05:40',
					bold: '限时活动开启提醒',
					read: true,
					light: '神之一手活动已开启，快去参加吧！'
				}, {
					time: '2023年2月25 05:40',
					bold: '限时活动结束提醒',
					read: true,
					light: '神之一手活动已结束，去看看其他活动吧！'
				}, {
					time: '2023年2月25 05:40',
					bold: '爆团开奖提醒',
					read: true,
					light: '您参与的爆团已开奖，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '爆团车队解散提醒',
					read: true,
					light: '您参与的爆团已解散！'
				}, {
					time: '2023年2月25 05:40',
					bold: '入场券费用退还提醒',
					read: true,
					light: '入场券费用已原路径退还，请注意查看！'
				}, {
					time: '2023年2月25 05:40',
					bold: '提现审核提醒',
					read: true,
					light: '您的提现申请已通过，请注意查看！'
				}, {
					time: '2023年2月25 05:40',
					bold: '背包商品即将冻结提醒',
					read: true,
					light: '您背包中**已存放超过*天，即将被冻结，请注意查看！'
				}, {
					time: '2023年2月25 05:40',
					bold: '背包商品冻结提醒',
					read: true,
					light: '您背包中**已被冻结，请注意查看！'
				}, {
					time: '2023年2月25 05:40',
					bold: '背包商品已解冻提醒',
					read: true,
					light: '您背包中**已被解冻，请注意查看！'
				}, {
					time: '2023年2月25 05:40',
					bold: '商品已售出提醒',
					read: true,
					light: '您寄售的**已售出，请注意查看！'
				}, {
					time: '2023年2月25 05:40',
					bold: '会员等级升级提醒',
					read: true,
					light: '恭喜您升到黄金会员，快去看看有哪些新的特权吧！'
				}],

				// 中奖数据
				awardData: [{
					time: '今天 05:40',
					bold: '爆团活动',
					read: false,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">终极大奖</text> 若来（Rolife）囡茜Nanci十二生肖盲盒玩具潮流手办娃娃摆件，请注意查看奖品！'
				}, {
					time: '今天 05:40',
					bold: '新手福利专区',
					read: false,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '昨天 05:40',
					bold: '限时活动开启提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '限时活动结束提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '爆团开奖提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '爆团车队解散提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '入场券费用退还提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '提现审核提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '背包商品即将冻结提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '背包商品冻结提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '背包商品已解冻提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '商品已售出提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}, {
					time: '2023年2月25 05:40',
					bold: '会员等级升级提醒',
					read: true,
					light: '恭喜您获得<text style="color:#333;font-weight: 500;">1-500阶段大奖</text> 奖品名称，请注意查看奖品！'
				}]
			}
		},
		onLoad() {
			this.showTipData()
		},
		methods: {
			showTipData() {
				this.chooseType = 'left'
				this.showData = this.tipData
			},
			showAwardData() {
				this.chooseType = 'right'
				this.showData = this.awardData
			},
			readAll() {
				if (this.chooseType === 'left') {
					this.tipData.forEach(i => i.read = true)
				} else {
					this.awardData.forEach(i => i.read = true)
				}
			},
			readMessageDetail() {
				if (this.chooseType === 'left') {
					uni.navigateTo({
						url: '/pages/messages/MessageDetail'
					})
				} else if (this.chooseType === 'right') {
					uni.navigateTo({
						url: '/pages/mybag/mybag'
					})
				}
			}
		},
		computed: {
			// 系统通知未读
			leftReadAll() {
				return this.tipData.filter(i => !i.read).length
			},
			// 中奖消息未读
			rightReadAll() {
				return this.awardData.filter(i => !i.read).length
			}
		},
		mounted() {
			this.stickyTop = uni.getSystemInfoSync().windowTop
		}
	}
</script>

<style lang="scss" scoped>
	// 消息页面
	.message-page {
		width: 100vw;
		font-size: 28rpx;

		// 顶部分栏
		.message-page-top {
			display: flex;

			position: sticky;
			// top: 88rpx;

			// 在微信小程序 top值为0
			// #ifdef MP-WEIXIN 
			top: 0;
			// #endif 

			background-color: #fff;
			padding: 30rpx 0;
			background: #fff;
			text-align: center;

			z-index: 99;

			// 两种消息
			.message-tit {
				width: 240rpx;
				color: #999;

				// 选中的样式
				&.active {
					color: #333;
				}
			}

			// 全部已读按钮
			.all-read {
				width: 240rpx;
				padding-right: 30rpx;
				text-align: right;
				font-size: 24rpx;
				color: #333;

				.icon {
					vertical-align: bottom;
					margin-right: 8rpx;
				}

				&.opactiy5 {
					opacity: .5;
				}
			}
		}

		// 消息主体样式
		.message-body {
			padding: 0 30rpx;

			// 每一项消息
			.message-item {
				margin-top: 20rpx;

				// 每一项消息的时间
				.message-item-time {
					font-size: 24rpx;
					text-align: center;
					line-height: 88rpx;
					color: #999;
				}

				// 每一项消息具体内容
				.message-item-cont {
					padding: 0 32rpx;
					background: #fff;
					border-radius: 16rpx;
					font-size: 24rpx;
					color: #333;

					// 消息类型
					.message-item-bold {
						padding: 32rpx 0 16rpx;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 32rpx;
					}

					// 消息内容
					.message-item-light {
						color: #999;
						padding-bottom: 32rpx;
						line-height: 36rpx;
					}

					// 查看详情
					.look-info {
						display: flex;
						justify-content: space-between;
						line-height: 88rpx;
					}
				}
			}

			// 最后一项下方留白
			.message-item:nth-last-child(1) {
				padding-bottom: 100rpx;
			}
		}
	}

	// 未读样式
	.red-circle {
		position: relative;

		&::after {
			position: absolute;
			content: '';
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: #FF7803;
			// 平移到右上角
			// transform: translate(20%, -120%);
			transform: translate(20%, -20%);
		}
	}
</style>
